<template>
	<view class="box">
		<view class="box_tit">
			<image class="box_imgOne" src="../../static/img/Invitefriends/invite_gift.png" mode=""></image>
			<image class="box_imgTwo" src="../../static/img/Invitefriends/invite_character.png" mode=""></image>
		</view>
		<view class="box_zhuce">
			<image class="box_imgFour" src="../../static/img/Invitefriends/title-02.png" mode=""></image>
			<image class="box_imgThree" src="../../static/img/Invitefriends/zhengti.png" mode=""></image>
			<view class="box_gonglue">
				<!-- <image class="gonglue_one" src="../../static/img/Invitefriends/raiders.png" mode=""></image> -->
				<view class="gonglue_title" @click="luck">客户分享累计够50人，不计是否购买，只要成功扫码公司APP成为公司会员，奖励分享人“曼陀仙子系列面膜”一套</view>
				<!-- <image class="gonglue_two" src="../../static/img/Invitefriends/more.png" mode=""></image> -->
			</view>
			<image class="box_imgfive" src="../../static/img/Invitefriends/share_icon.png" mode="" @click="share"></image>
		</view>
		<view class="box_zhuce" style="margin-top: 120upx;">
			<image class="box_imgFour" src="../../static/img/Invitefriends/title-01.png" mode=""></image>
			<view class="box_jiang" v-for="(item,index) in list" :key="index">
				<view class="box_jiang_left">
					<image :src="item.picUrl" mode=""></image>
				</view>
				<view class="box_jiang_right">
					<view>
						<view class="jiang_right_tit">{{item.name}}</view>
						<view class="jiang_right_con">{{item.brief}}</view>
					</view>
					<view>
						<view v-if="invitesNum<=receiveMinInvitesNum || isReceived" class="jiang_green_btn">立即领取</view>
						<view v-else @click="goback(item.id)" class="jiang_right_btn">立即领取</view>
					</view>

				</view>

			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: [],
				isReceived:false,
				invitesNum:"",
				receiveMinInvitesNum:"",
				userId:"",
				productId:"",
			}
		},
		onLoad() {
			this.loadData();
			//获取用户信息
			let userinfo = uni.getStorageSync("userInfo")
			this.userId = userinfo.id
		},

		methods: {
			loadData() {
				this.tui.request('/app/goods/list', 'GET', {
						isCloud: "2",
					}, false, false, false, )
					.then(res => {
						console.log(res.data.list)
						this.list = res.data.list
					}).catch(err => {
						console.log(err)
					})
					
				this.tui.request('/app/profit/invites', 'GET', {}, false, false, false, )
					.then(res => {
						console.log(res)
						this.isReceived = res.data.isReceived
						this.invitesNum = res.data.invitesNum
						this.receiveMinInvitesNum = res.data.receiveMinInvitesNum
					}).catch(err => {
						console.log(err)
					})
					
			},
			luck(){
				this.tui.toast("客户分享累计够50人，不计是否购买，只要成功扫码公司APP成为公司会员，奖励分享人“曼陀仙子系列面膜”一套")
			},
			goback(item){
				let _this = this;
				
				_this.tui.request('/app/cart/fastadd', 'POST', {
							goodsId: item,
							productId: _this.productId,
							number: 1,
							userId: _this.userId,
						},
						false, false, false, )
					.then(res => {
						if (res.errno == 0) {
							let cartId = res.data.cartId
							uni.navigateTo({
								url: `/pages/order/createOrder?cartId=${cartId}&userId=${_this.userId}`
							})
						} else {
							console.log(res)
							_this.tui.toast(res.errmsg)
						}
					}).catch(err => {
						console.log(err)
					})
				
				
			},
			share(){
				uni.navigateTo({
					url:"/pages/user/invitation"
				})
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
	}

	.box {
		width: 100%;
		padding-bottom: 200upx;
		background: linear-gradient(-30deg, #C360A6, #95497F);
	}

	.box_tit {
		width: 623upx;
		margin: 0 auto;
		text-align: center;
		padding-top: 100upx;
		margin-bottom: 60upx;
	}

	.box_imgOne {
		display: block;
		width: 476upx;
		height: 85upx;
		margin: 0 auto;
	}

	.box_zhuce {
		width: 690upx;
		background: #FFFFFF;
		border-radius: 12px;
		margin: 0 auto;
		padding-top: 70upx;
		padding-bottom: 35upx;
	}

	.box_imgFour {
		display: block;
		width: 416upx;
		height: 66upx;
		margin: 0 auto;
		margin-top: -52px;
	}

	.box_imgThree {
		display: block;
		width: 583upx;
		height: 166upx;
		margin: 0 auto;
		margin-top: 50upx;
	}

	.box_gonglue {
		width: 518upx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		padding-top: 10upx;
		text-align: center;
		padding-bottom: 30upx;
	}

	.gonglue_one {
		width: 22upx;
		height: 24upx;
	}

	.gonglue_title {
		padding-right: 10upx;
		padding-left: 10upx;
		font-size: 26upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #7A4801;
		line-height: 30upx;
	}

	.gonglue_two {
		width: 10upx;
		height: 18upx;
	}

	.box_imgfive {
		display: block;
		width: 389upx;
		height: 75upx;
		margin: 0 auto;
	}

	.box_jiang {
		width: 100%;
		display: flex;
		padding: 10px;
	}

	.box_jiang_left {
		width: 32%;
		height: 200upx;
		background: #D2C9F3;
		border-radius: 16upx;
	}

	.box_jiang_left image {
		width: 100%;
		height: 100%;
	}

	.box_jiang_right {
		width: 68%;
		padding-left: 20upx;
		position: relative;
	}

	.jiang_right_tit {

		font-size: 32upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		line-height: 44upx;
		
		overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.jiang_right_con {

		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		line-height: 44upx;
		
		overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.jiang_right_btn {
		width: 200upx;
		background: #6E609E;
		border-radius: 25upx;
		text-align: center;


		font-size: 30upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 54upx;

		position: absolute;
		bottom: 0;
		right: 0;

	}
	.jiang_green_btn {
		width: 200upx;
		background: #999999;
		border-radius: 25upx;
		text-align: center;
	
	
		font-size: 30upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 54upx;
	
		position: absolute;
		bottom: 0;
		right: 0;
	
	}
</style>
